<template>
  <div class="page-main" v-title data-title="系统访问日志">
    <home-nav :userData="userinfo"></home-nav>
    <div class="banner"><span>系统访问日志</span></div>
    <div class="container">
    
    <a-modal
      title="日志详情"
      :visible="detailVisible"
      @ok="detailVisible=false"
      @cancel="detailVisible=false"
      >
      <a-form-model ref="form1" >
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="日志模块" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input   v-model="record.logModuleShow" readOnly/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="日志类容" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input   v-model="record.logContent" readOnly/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="日志类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input   v-model="record.logTypeShow" readOnly/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="操作类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input   v-model="record.operaterTypeShow" readOnly/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="请求方法" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-textarea auto-size :value="record.method" readOnly/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="请求参数" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-textarea auto-size :value="record.requestParam" readOnly/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="ip" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input   v-model="record.ip" readOnly/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="耗时(毫秒)" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input   v-model="record.costTime" readOnly/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="操作人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input   v-model="record.userid+'/'+record.username" readOnly/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>

    <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="6">
              <a-form-item label="日志模块">
                <a-select   v-model="queryParam.logModule" placeholder="请选择日志模块" >
                  <a-select-option v-for="codeInfo in logModuleList" :value="codeInfo.code" :key="codeInfo.code" :title="codeInfo.name" >{{ codeInfo.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item label="日志时间">
                <a-range-picker @change="logDateChange" 
                :default-value="[moment(queryParam.beginDay, dateFormat), moment(queryParam.endDay, dateFormat)]" :format="dateFormat" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item label="">
                <a-input-group compact>
                  <a-select v-model="queryParam.searchField">
                    <a-select-option value="log_content"> 日志内容 </a-select-option>
                    <a-select-option value="request_param"> 请求参数 </a-select-option>
                    <a-select-option value="userid"> 操作人 </a-select-option>
                  </a-select>
                  <a-input-search
                   style="width: 60%"
                   v-model="queryParam.keyword"
                   @search="searchQuery"
                   placeholder="请按照关键字进行搜索"
                   />
                </a-input-group>
              
              </a-form-item>
            </a-col>

        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">

    </div>

    <!-- table区域-begin -->
    <div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleDetail(record)">详情</a>
        </span>

      </a-table>
    </div>
  </a-card>
    </div>
    
  </div>

</template>

<script>

  import moment from 'moment'
  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { httpAction, getAction,postAction } from '@/api/manage'
  import { DateTimeFormat } from '@/utils/common.js'
  
  export default {
    name: 'SysLogList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      HomeNav: () => import('@/components/layouts/HomeNav')
    },
    data () {
      return {
        detailVisible:false,
        dateFormat: 'yyyy-MM-DD',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        userinfo: {
          info: this.$store.getters.userInfo,
          module: 'ContractTaskList',
        },
        description: '系统访问日志',
        record:{},
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'日志模块',
            align:"center",
            dataIndex: 'logModuleShow'
          },
          {
            title:'日志内容',
            align:"center",
            dataIndex: 'logContent'
          },
          {
            title:'ip',
            align:"center",
            dataIndex: 'ip'
          },
          {
            title:'耗时(毫秒)',
            align:"center",
            dataIndex: 'costTime'
          },
          {
            title:'操作人',
            align:"center",
            dataIndex: 'username'
          },
          {
            title:'操作时间',
            align:"center",
            dataIndex: 'createTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/sys/user/sysLog",
          sysLogDetail: "/sys/user/sysLogDetail"
        },
        logModuleList:[
          {code:0,name:'常规'},
          {code:1,name:'后台报表'},
          {code:2,name:'后台报表中心'}
        ],
        queryParam: {
          logModule:1,
          beginDay:'',
          endDay:'',
          searchField:'log_content',
          keyword:''
        },
      }
    },
    created() {
      this.paramInit()
    },
    computed: {
    },
    methods: {
      moment,
      paramInit(){
        var nowStr = DateTimeFormat(new Date()).substring(0,10)
        this.queryParam.logModule=1
        this.queryParam.beginDay=nowStr
        this.queryParam.endDay=nowStr
        this.queryParam.searchField='log_content'
      },
      logDateChange(date, dateString) {
        this.queryParam.beginDay=dateString[0]
        this.queryParam.endDay=dateString[1]
      },
      searchReset(){
        this.paramInit();
        this.loadData(1);
      },
      handleDetail(record){
        getAction(this.url.sysLogDetail, { id: record.id }).then((res) => {
            if (res.code == 200) {
              this.record = res.result
              this.detailVisible=true
            } else {
              this.$message.warning('查询日志信息失败:' + res.message)
            }
          }).catch((res) => {
            this.$message.warning('查询日志信息异常:' + res.message)
          })
      }
    }
  }
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/hte-main.less';
.page-main {
  .banner {
    background-image: url(../../assets/contract-top.png);
  }
  .container {
    .content-list {
      margin-top: 15px;
    }
  }
  .font-active {
    cursor: pointer;
  }
}
.contentStyle-default {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contentStyle-red {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: red;
}
.contentStyle-yellow {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: burlywood;
}
</style>